<script lang="ts">
import { ELFormData, FormItemConfig, FormItemConfigGroup } from "@/component-interface";
import {
  defineComponent,
  h,
  PropType,
  resolveComponent,
  resolveDynamicComponent,
} from "vue";
export default defineComponent({
  props: {
    formItemConfigGroup: {
      type: Array as PropType<FormItemConfigGroup>,
      default: () => [],
    },
    labelPosition: {
      default: "right"
    },
    fnArgs: [String, Number, Object],
  },
  data() {
    return {
      labelWidth: "100px",
      formData: {} as ELFormData,
    };
  },
  methods: {
    setFormData(formData: ELFormData) {
      this.formData = formData;
    },
    getFormData() {
      return this.formData;
    },
    onChange(item: FormItemConfig) {
      if (item.onChange) {
        item.onChange(this.formData);
      }
    },
  },
  render() {
    const ElForm = resolveComponent("ElForm");
    const ElRow = resolveComponent("ElRow");
    const ElCol = resolveComponent("ElCol");
    const ElFormItem = resolveComponent("ElFormItem");
    const ElOption = resolveComponent("ElOption");
    const _this = this;
    return h(
      ElForm as any,
      {
        "label-position": this.labelPosition,
        "label-width": this.labelWidth,
        model: this.formData,
      },
      {
        default: () => [
          h(
            ElRow,
            this.formItemConfigGroup.map((item, index) => {
              return h(
                ElCol as any,
                { span: item.span ? item.span : 24, key: index },
                {
                  default: () => [
                    h(
                      ElFormItem as any,
                      { label: item.label },
                      {
                        default: () => [
                          // todo 日期选择有问题
                          h(
                            resolveDynamicComponent(item.type) as any,
                            {
                              modelValue: this.formData[item.prop],
                              style: item.style,
                              'onUpdate:modelValue': (value: any) => {
                                this.formData[item.prop] = value;
                              },
                              onChange: (value: any) => {
                                if (item.onChange) {
                                  item.onChange(this.formData);
                                }
                              },
                              ...item.attrs,
                            },
                            item.type === "ElSelect"
                              ? item.options.map((option: any) => {
                                return h(ElOption, {
                                  key: option.value,
                                  label: option.label,
                                  value: option.value,
                                });
                              })
                              : null
                          ),
                        ],
                      }
                    ),
                  ],
                }
              );
            })
          ),
        ],
      }
    );
  },
});
</script>
